<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        Vue (读音 /vju:/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript框架
        口 全称是Vue.js或者Vue.js;
     -->

     <!-- 
        原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式
口 命令式编程和声明式编程
口 命令式编程关注的是“how to do”自己完成整个how的过程;
口声明式编程关注的是“what to do”，由框架(机器)完成 “how”的过程
在原生的实现过程中，我们是如何操作的呢?
口我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令口 这样的编写代码的过程，我们称之为命令式编程
口在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的;
在Vue的实现过程中，我们是如何操作的呢?
口我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods;口 这样的编写代码的过程，我们称之为是声明式编程
口目前Vue、React、Angular、小程序的编程模式，我们称之为声明式编程
 -->
     <div id="app">
        <h2>{{message}}</h2>
        <ul>
            <li v-for="(item,index) in movies" :key= "index" >{{item}}</li>
        </ul>
        <div>{{num}}</div>
        <button @click="jia">+1</button>
        <button @click="jian">-1</button>
     </div>
     <!-- cdn地址 -->
     <!-- <script src="https://unpkg.com/vue@next"></script> -->
     <!-- 本地地址引入vue -->
     <script src="./lib/vue.js"></script>
     <script>
        // 使用Vue
        const app = Vue.createApp({
            data: function() {
              return {
                title:'hello 1Vue3',
                message:"你好啊",
                movies:['大话西游','星际穿越',"盗梦空间","少年派"],
                num: 0 
              } 
            },
            methods:{
                jia(){
                    this.num++
                },
                jian(){
                    this.num--
                }
            }
        })
        // 挂载
        app.mount("#app")
     </script>
</body>
</html>